import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Tooltip, Card, Form, Table, message } from 'antd';
import dynamic from 'umi/dynamic';
import LoadingComponent from '@/components/PageLoading/index';
import request from '@/utils/request';
import styles from '../../styles.less';

const namespace = 'busiComponent';

// 判断空对象
const isEmptyObject = obj => {
  if (Object.keys(obj).length === 0) {
    return true;
  }
  return false;
};

const BusiElementAdd = dynamic({
  loader: () => import('./BusiELementAdd'),
  loading: LoadingComponent,
});

function BusiElementInfo(props) {
  const [loading, setLoading] = useState(false);

  // 选中业务对象变化时加载规格数据
  useEffect(() => {
    queryBusiElement();
  }, [props.selectBusiObjAdd]);

  useEffect(() => {
    queryBusiElement();
  }, [props.busiComponentAddType]);

  const queryBusiElement = () => {
    if (props.busiComponentAddType === 'add') {
      if (!isEmptyObject(props.selectBusiObjAdd)) {
        setLoading(true);
        request('pmc/pcms/busiComponent/queryAttrElementList', {
          data: { busiObjId: props.selectBusiObjAdd.busiObjId },
        }).then(res => {
          if (res != null && res.success === true) {
            saveBusiElementAddList(res.data);
            setLoading(false);
          } else if (res && res.errMessage) {
            message.error(res.errMessage);
          } else {
            message.error('查询失败');
          }
        });
      }
    } else if (props.busiComponentAddType === 'modify') {
      setLoading(true);
      request('pmc/pcms/element/queryBusiElementList', {
        data: {
          busiObjId: props.selectBusiObjAdd.busiObjId || props.selectBusiComponent.objId,
          busiCompId: props.selectBusiComponent.busiCompId,
        },
      }).then(res => {
        if (res != null && res.success === true) {
          saveBusiElementAddList(res.data);
          setLoading(false);
        } else if (res && res.errMessage) {
          message.error(res.errMessage);
        } else {
          message.error('查询失败');
        }
      });
    }
  };

  // dva 保存列表里选中组件元素
  const saveSelectBusiElement = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveSelectBusiElement`,
      payload: params,
    });
  };

  // dva 保存编辑组件元素新增弹窗展示/隐藏标记
  const saveBusiElementAddVisibleFlag = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveBusiElementAddVisibleFlag`,
      payload: params,
    });
  };

  // dva 保存对象组件新增类型
  const saveBusiElementAddType = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveBusiElementAddType`,
      payload: params,
    });
  };

  // dva 保存组件元素列表数据
  const saveBusiElementAddList = params => {
    const { dispatch } = props;
    dispatch({
      type: `${namespace}/saveBusiElementAddList`,
      payload: params,
    });
  };

  // 编辑组件元素
  const handleEdit = record => {
    saveSelectBusiElement(record);
    saveBusiElementAddType('edit');
    saveBusiElementAddVisibleFlag(true);
  };

  const cellStyle = {
    maxWidth: 200,
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    cursor: 'pointer',
  };

  const columns = [
    {
      title: '属性名称',
      dataIndex: 'attrName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '属性编码',
      dataIndex: 'attrNbr',
    },
    {
      title: '元素名称',
      dataIndex: 'elementName',
      onCell: () => {
        return {
          style: cellStyle,
        };
      },
      render: text => (
        <Tooltip placement="topLeft" title={text}>
          {text}
        </Tooltip>
      ),
    },
    {
      title: '元素编码',
      dataIndex: 'elementCode',
    },
    {
      title: '组件类型',
      dataIndex: 'componentTypeName',
    },
    {
      title: '默认值',
      dataIndex: 'defaultValue',
    },
    {
      title: '是否必填',
      dataIndex: 'requiredFlag',
      render: text => {
        return text === 1 ? '是' : text === 0 ? ' 否' : '';
      },
    },
    {
      title: '是否只读',
      dataIndex: 'readOnlyFlag',
      render: text => {
        return text === 1 ? '是' : text === 0 ? ' 否' : '';
      },
    },
    {
      title: '是否显示',
      dataIndex: 'showFlag',
      render: text => {
        return text === 1 ? '是' : text === 0 ? ' 否' : '';
      },
    },
    {
      title: '操作',
      render: (text, record) => {
        return (
          <span>
            <a
              onClick={() => {
                handleEdit(record);
              }}
            >
              编辑
            </a>
          </span>
        );
      },
    },
  ];

  return (
    <div className={styles.card_body_no_adding}>
      <Card title="组件元素" className="cute" style={{ height: '100%' }}>
        <Table
          rowKey={record => record.attrId}
          columns={columns}
          pagination={false}
          dataSource={props.busiElementAddList}
          bordered
          loading={loading}
          rowClassName={record => {
            return record.attrId === props.selectBusiElement.attrId ? styles.clickRowStyle : '';
          }}
          onRow={record => {
            return {
              onClick: () => {
                saveSelectBusiElement(record);
              },
            };
          }}
        />
      </Card>
      {/* 编辑组件元素 */}
      {props.busiElementAddVisibleFlag ? (
        <BusiElementAdd modalVisible={props.busiElementAddVisibleFlag} />
      ) : null}
    </div>
  );
}

export default connect(({ busiComponent, setting }) => ({
  selectBusiObjAdd: busiComponent.selectBusiObjAdd,
  selectBusiElement: busiComponent.selectBusiElement,
  busiElementAddVisibleFlag: busiComponent.busiElementAddVisibleFlag,
  busiElementAddList: busiComponent.busiElementAddList,
  busiComponentAddType: busiComponent.busiComponentAddType,
  selectBusiComponent: busiComponent.selectBusiComponent,
  size: setting.size,
}))(Form.create()(BusiElementInfo));
